昨天快速複習了 Rive 的使用情境，今天來介紹這次系列會用到的 Data Binding，看看前端的資料怎麼跟 Rive 裡的畫面接起來。

2024 年的系列文介紹過 State Machine Inputs，我們團隊當時也是用這個方式控制動畫。現在改用 Data Binding，除了能做到原本的狀態切換，還能傳入文字、顏色、圖片等資料，直接更新綁定的畫面屬性。

Data Binding 是什麼？

假設 Rive 裡有一張玩家卡片，需要顯示姓名、頭像與分數。
設計師可以先把這些畫面屬性綁定到對應欄位，前端再把資料填進去，畫面就會跟著更新。
簡單講，就是設計師挖一個洞，給你一個 key，你把資料放進去。
同一套卡片設計，就能套用不同玩家的資料，不需要為了不同姓名、頭像與分數各做一個版本。
官方文件也列出了顏色、位置與圖片等綁定情境。

基本概念

Data Binding 有三個名詞要先認識：

• View Model：定義資料結構，例如 playerName 是 string、score 是 number。
• View Model Instance：存放實際資料，例如姓名是「小明」、分數是 100。
• Binding：把資料欄位連到畫面屬性，例如將 playerName 綁定到姓名文字。

前端修改 Instance 裡的值，綁定的畫面就會隨之更新。從使用方式來理解，很像觀察者模式。三者的關係可參考官方概念說明。

除了文字，位置也可以綁定。以下方官方範例來說，將笑臉的 X、Y 座標分別綁定到 circleX、circleY，再修改 Instance 裡對應的數值，就能改變笑臉的位置。

圖片來源：Rive 官方文件

圖片來源：Rive 官方文件

為什麼我們轉用 Data Binding？

除了可綁定的資料類型更多，Inputs 官方文件也已標示 deprecated，建議新專案使用 Data Binding，既有專案安排搬遷。

對團隊來說，串接前要先跟設計師約定欄位名稱、型別與用途。像 score 代表實際分數還是動畫進度，就得先講清楚……有了共同的 View Model spec，才能減少來回確認的成本。明天會用一個小 demo，實際把資料接進 Rive。